


<template>
    <div class="padding-sm"> <el-row class="" :gutter="10">


            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">考勤数据分析</span>
                    </div>
                    <div class="echart" id="CheckRecordStatistics"
                        :style="{ float: 'left', width: '100%', height: '500px' }">
                    </div>
                </el-card>
            </el-col>
        </el-row></div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from "echarts";

export default {
    name: 'CheckRecordStatistics',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user", 'userId'
        ])
    },
    CheckRecordStatistics: null,

    data() {
        return {
        };
    },
    mounted() {

        this.GetEchartApi();


    },
    methods: {

        async GetEchartApi() {

            let { Data } = await this.$Post("/CheckRecord/CheckRecordStatistics", {});
            const option = {
                title: {
                    text: '数据只统计最近30天的考勤情况'
                },
                legend: {
                    data: ['正常考勤', '迟到']
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        rotate: -70, // 设置文字方向为向下排列
                        margin: 5, // 设置文字与轴线的距离
                    },
                    data: Data.map(x => x.name)
                }, tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '正常考勤',
                        data: Data.map(x => x.value),
                        type: 'line',
                        itemStyle: {
                            color: '#125f9d'
                        }
                    },
                    {
                        name: '迟到',
                        data: Data.map(x => x.latevalue),
                        type: 'line',
                        itemStyle: {
                            color: '#b00a5b'
                        }
                    },
                    {
                        name: '正常无需处理',
                        data: Data.map(x => x.SuccessCount),
                        type: 'line',
                        itemStyle: {
                            color: '#059811'
                        }
                    }
                ]
            };
            this.myChart = echarts.init(document.getElementById("CheckRecordStatistics"));// 图标初始化
            this.myChart.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                this.myChart.resize();
            });

        },















    }


}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>







